import React, { useState, useEffect } from 'react'
import a from '../../public/img/a.png'
import a1 from '../../public/img/a1.png'
import a2 from '../../public/img/a2.png'
import a3 from '../../public/img/a3.png'
import a4 from '../../public/img/a4.png'

import b from '../../public/img/b.png'
import b1 from '../../public/img/b1.png'
import b2 from '../../public/img/b2.png'
import c from '../../public/img/c.png'
import c1 from '../../public/img/c1.png'
import c2 from '../../public/img/c2.png'
import c3 from '../../public/img/c3.png'
import c4 from '../../public/img/c4.png'
import c5 from '../../public/img/c5.png'
import c6 from '../../public/img/c6.png'
export default function Tool() {
    const [showBlock, setShowBlock] = useState(false);
    const [showBlock1, setShowBlock1] = useState(false);
    const [showBlock2, setShowBlock2] = useState(false);
    const [showBlock5, setShowBlock5] = useState(false);
    const [showFhdb, setShowFhdb] = useState(false);
  
    useEffect(() => {
      const handleScroll = () => {
        const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
        const windowHeight = window.innerHeight;
        const documentHeight = document.documentElement.scrollHeight;
        
        // 当滚动到顶部时隐藏，滚动到底部时显示
        if (scrollTop === 0) {
          setShowFhdb(false);
        } else if (scrollTop + windowHeight >= documentHeight - 100) {
          setShowFhdb(true);
        } else {
          setShowFhdb(false);
        }
      };
  
      window.addEventListener('scroll', handleScroll);
      return () => window.removeEventListener('scroll', handleScroll);
    }, []);
  return (
    <div>
        <div className='cbgn1'
          onMouseEnter={() => setShowBlock(true)}
          onMouseLeave={() => setShowBlock(false)}
        >
            <img src={a} alt=""  style={{marginLeft:'24px'}}/>
            {showBlock && (
              <div style={{position: 'absolute', right: '90px', top: '0', width: '200px', height: '100px', background: 'white', zIndex: 10}} className='popup-b'>
              <img src={b} alt=""  style={{marginLeft:'-30px',marginTop:'-60px'}}/>
              </div>
            )}
        </div>
        <div className='cbgn2'
           onMouseEnter={() => setShowBlock1(true)}
           onMouseLeave={() => setShowBlock1(false)}
        >
        <img src={a1} alt=""  style={{marginLeft:'13px'}}/>
        {showBlock1 && (
              <div style={{position: 'absolute', right: '90px', top: '110px', width: '200px', height: '100px', zIndex: 10}} className='popup-b1'>
               <img src={b1} alt=""  style={{marginLeft:'-160px',marginTop:'-200px'}}/>
              </div>
            )}
        </div>
        <div className='cbgn3'
          onMouseEnter={() => setShowBlock2(true)}
          onMouseLeave={() => setShowBlock2(false)}
        >
        <img src={a2} alt=""  style={{marginLeft:'24px',marginTop:'5px'}}/>
        {showBlock2 && (
              <div style={{position: 'absolute', right: '90px', top: '110px', width: '200px', height: '100px', zIndex: 10}} className='popup-b2'>
               <img src={b2} alt=""  style={{marginLeft:'-175px',marginTop:'-160px'}}/>
              </div>
            )}
        </div>
        <div className='cbgn4'>
        <img src={a3} alt=""  style={{marginLeft:'24px'}}/>
        </div>
        <div className='cbgn5'
          onMouseEnter={() => setShowBlock5(true)}
          onMouseLeave={() => setShowBlock5(false)}
        >
        <img src={a4} alt=""  style={{marginLeft:'18px'}}/>
        {showBlock5 && (
              <div style={{position: 'absolute', right: '90px', top: '-180px', width: '322px', height: '344px', background: '#fff', border: '1px solid #ccc', zIndex: 10}} className='popup-jj'>
                <div className='cbgn51'>
                    <div>
                     <img src={c} alt=""  style={{width:'25px',height:'25px',marginLeft:'30px',float:'left'}}/>
                     <h3 style={{marginLeft:'8px',float:'left',marginTop:'-1px'}}>企业客服</h3>
                     <p style={{marginLeft:'-75px',float:'left',marginTop:'30px'}}>工作时间:9:30-18:30</p>
                     <div style={{width:"322px",height:'30px',position:'absolute',marginTop:'60px'}}>
                        <img src={c1} alt=""  style={{float:'left',marginLeft:'65px',width:'80px',height:'29px'}}/>
                        <img src={c2} alt="" style={{float:'left',marginLeft:'2px',width:'80px',height:'29px'}}/>
                     </div>
                    </div>
                </div>
                <div className='cbgn51'>
                <div>
                     <img src={c} alt=""  style={{width:'25px',height:'25px',marginLeft:'30px',float:'left'}}/>
                     <h3 style={{marginLeft:'8px',float:'left',marginTop:'-1px'}}>个人客服</h3>
                     <p style={{marginLeft:'-75px',float:'left',marginTop:'30px'}}>工作时间:9:30-18:30</p>
                     <div style={{width:"322px",height:'30px',position:'absolute',marginTop:'60px'}}>
                        <img src={c3} alt=""  style={{float:'left',marginLeft:'65px',width:'80px',height:'29px'}}/>
                      
                     </div>
                    </div>
                </div>
                <div className='cbgn52'>
                <img src={c4} alt="" style={{position:'absolute',marginLeft:'15px'}}/>
                <p style={{float:'left',color:'#ccc',marginLeft:'35px',marginTop:'-2px'}}>
                
                  
                    常见问题</p>
                    <img src={c5} alt="" style={{position:'absolute',marginLeft:'12px',marginTop:'2px'}}/>
                <p style={{float:'left',color:'#ccc',marginLeft:'30px',marginTop:'-2px'}}>
                   
                    意见反馈</p>
                    <img src={c6} alt="" style={{position:'absolute',marginLeft:'13px'}}/>
                <p style={{float:'left',color:'#ccc',marginLeft:'30px',marginTop:'-2px'}}>
           
                    网站声明</p>
                </div>
              </div>
            )}
        </div>
      
    </div>
  )
}
